/* 
    应用中心,应用管理,应用详细,pod 监控
 */
 <template>
    <div class="wrapper monitor">
        <div style="margin: 10px 0;text-align: right;">
            <el-radio-group v-model="times" size="small">
                <el-radio-button label="5分钟"></el-radio-button>
                <el-radio-button label="30分钟"></el-radio-button>
                <el-radio-button label="1小时"></el-radio-button>
                <el-radio-button label="6小时"></el-radio-button>
                <el-radio-button label="1天"></el-radio-button>
                <el-radio-button label="1周"></el-radio-button>
            </el-radio-group>
            <el-button @click="flush" type="primary" size="small" icon="el-icon-refresh">刷新</el-button>
        </div>

        <div style="padding-top:10px;" v-show="memory">
            <div class="chart">
                <div id="chart-memory" style="width:1100px; height:200px;"></div>
            </div>
        </div>
        <div style="padding-top:10px;" v-show="cpu">
            <div class="chart">
                <div id="chart-cpu" style="width:1100px; height:200px;"></div>
            </div>
        </div>
        <div style="padding-top:10px;" v-show="net_in">
            <div class="chart">
                <div id="chart-net-in" style="width:1100px; height:200px;"></div>
            </div>
        </div>
        <div style="padding-top:10px;" v-show="net_out">
            <div class="chart">
                <div id="chart-net-out" style="width:1100px; height:200px;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
require('echarts/theme/macarons');
export default {
    data() {
        return {
            memory: true,
            cpu: true,
            net_in: true,
            net_out: true,
            times: '5分钟',
            chart_memory: {},
            chart_cpu: {},
            chart_net_in: {},
            chart_net_out: {}
        }
    },
    props: [
        'monitorObject',
        'memory_metrics',
        'cpu_metrics',
        'net_in_metrics',
        'net_out_metrics',
        'namespaceName',
        'nodeNames',
        'podNames',
        'autoFlush'
    ],
    methods: {
        //刷新,重新查询都是用的这个方法
        flush() {
            if (this.memory) {
                this.query('memory', this.memory_metrics);
            }
            if (this.cpu) {
                this.query('cpu', this.cpu_metrics);
            }
            if (this.net_in) {
                this.query('net-in', this.net_in_metrics);
            }
            if (this.net_out) {
                this.query('net-out', this.net_out_metrics);
            }
        },

        //查询
        query(monitorType, monitorMetrics) {
            if (monitorType == undefined || monitorType == '') {
                return;
            }
            if (monitorMetrics == undefined || monitorMetrics == '') {
                return;
            }
            if (this.monitorObject == undefined || this.monitorObject == '') {
                return;
            }
            if (this.monitorObject == 'namespace' && (this.namespaceName == undefined || this.namespaceName == '')) {
                return;
            }
            if (this.monitorObject == 'node' && (this.nodeNames == undefined || this.nodeNames == [])) {
                return;
            }
            if (this.monitorObject == 'pod' && (this.namespaceName == undefined || this.namespaceName == '' || this.podNames == undefined || this.podNames == [])) {
                return;
            }

            let url = this.projectConfig.URL_API_MONITOR_QUERY;
            let p = {
                metricsType: monitorMetrics,
                monitorObject: this.monitorObject,
                monitorType: monitorType,
                namespaceName: this.namespaceName,
                nodeNames: this.nodeNames,
                podNames: this.podNames,
                times: this.timeParm
            };

            let nns = "";
            if (p.nodeNames != undefined) {
                p.nodeNames.forEach(function(element) {
                    if (nns == '') {
                        nns += element;
                    } else {
                        nns += ',' + element;
                    }
                });
            }
            let pns = "";
            if (p.podNames != undefined) {
                p.podNames.forEach(function(element) {
                    if (pns == '') {
                        pns += element;
                    } else {
                        pns += ',' + element;
                    }
                });
            }
            if (this.monitorObject == 'node' && (nns == undefined || nns == '')) {
                return;
            }
            if (this.monitorObject == 'pod' && (pns == undefined || pns == '')) {
                return;
            }
            url += "?metricsType=" + p.metricsType
                + "&monitorObject=" + p.monitorObject
                + "&monitorType=" + p.monitorType
                + "&namespaceName=" + p.namespaceName
                + "&nodeNames=" + nns
                + "&podNames=" + pns
                + "&times=" + p.times;
            this.httpClient.httpClientget(url).then((response) => {
                let data = response.data;
                if (monitorType == 'memory') {
                    this.chart_memory.setOption({
                        title: {
                            text: data.title,
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.legend
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.xAxisData,
                            name: data.xName
                        },
                        yAxis: {
                            type: 'value',
                            name: data.yName
                        },
                        series: data.yAxisData
                    }, true);
                }
                if (monitorType == 'cpu') {
                    this.chart_cpu.setOption({
                        title: {
                            text: data.title,
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.legend
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.xAxisData,
                            name: data.xName
                        },
                        yAxis: {
                            type: 'value',
                            name: data.yName
                        },
                        series: data.yAxisData
                    }, true);
                }
                if (monitorType == 'net-in') {
                    this.chart_net_in.setOption({
                        title: {
                            text: data.title,
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.legend
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.xAxisData,
                            name: data.xName
                        },
                        yAxis: {
                            type: 'value',
                            name: data.yName
                        },
                        series: data.yAxisData
                    }, true);
                }
                if (monitorType == 'net-out') {
                    this.chart_net_out.setOption({
                        title: {
                            text: data.title,
                            textStyle: {
                                fontSize: 12
                            }
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.legend
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: data.xAxisData,
                            name: data.xName
                        },
                        yAxis: {
                            type: 'value',
                            name: data.yName
                        },
                        series: data.yAxisData
                    }, true);
                }
            });
        }
    },
    mounted: function() {
        let _this = this;
        if (this.monitorObject == 'cluster' || this.monitorObject == 'namespace') {
            this.net_in = false;
            this.net_out = false;
        }
        if (this.memory) {
            this.chart_memory = echarts.init(document.getElementById('chart-memory'), 'macarons');
            this.query('memory', this.memory_metrics);
        }
        if (this.cpu) {
            this.chart_cpu = echarts.init(document.getElementById('chart-cpu'), 'macarons');
            this.query('cpu', this.cpu_metrics);
        }
        if (this.net_in) {
            this.chart_net_in = echarts.init(document.getElementById('chart-net-in'), 'macarons');
            this.query('net-in', this.net_in_metrics);
        }
        if (this.net_out) {
            this.chart_net_out = echarts.init(document.getElementById('chart-net-out'), 'macarons');
            this.query('net-out', this.net_out_metrics);
        }
        //每隔1分钟刷新1次
        if (this.autoFlush != undefined && this.autoFlush == true) {
            setInterval(function() {
                _this.flush();
            }, 60000);
        }
    },
    computed: {
        "timeParm": function() {
            if (this.times == '5分钟') {
                return "5min";
            }
            if (this.times == '30分钟') {
                return "30min";
            }
            if (this.times == '1小时') {
                return "1h";
            }
            if (this.times == '6小时') {
                return "6h";
            }
            if (this.times == '1天') {
                return "1d";
            }
            if (this.times == '1周') {
                return "1week";
            }
        }
    }
    ,
    watch: {
        monitorObject: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        memory_metrics: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        cpu_metrics: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        net_in_metrics: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        net_out_metrics: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        times: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        namespaceName: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        nodeNames: {
            handler: function(val, oldval) {
                this.flush();
            }
        },
        podNames: {
            handler: function(val, oldval) {
                this.flush();
            }
        }
    }
}
</script>
<style>

</style>